<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<input id="num1" style="width: 100px;">
		
		<input id="symbol" list="symbollist" style="width: 50px;">
		<datalist id="symbollist">
			<option value="+">+</option>
			<option value="-">-</option>
			<option value="*">*</option>
			<option value="/">/</option>
		</datalist>
		
		<input id="num2" style="width: 100px;">
		<button onclick="calculate()">计算</button>
	</body>
	<script type="text/javascript">
		function calculate(){        
			var num1=document.getElementById('num1').value;
			var num2=document.getElementById('num2').value;
			var x=document.getElementById('symbol').value;
			switch (x){
				case '+':
				console.log(parseFloat(num1)+parseFloat(num2));
				break;
				case '-':
				console.log(parseFloat(num1)-parseFloat(num2));
				break;
				case '*':
				console.log(parseFloat(num1)*parseFloat(num2));
				break;
				case '/':
				console.log(parseFloat(num1)/parseFloat(num2));
				break;
				default:
				break;
			}
		}
	</script>
</html>
